<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ball</title>
    <style>
        .box {
            width: 1000px;
            height: 720px;
            position: relative;
            margin: 10px auto;
            background-color: bisque;

        }

        .balluser {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border-radius: 100%;
            position: absolute;
            text-justify: inter-cluster;
            text-align: center;



        }

        .creacreatedball {
            position: absolute;
            left: 500px;
            top: 500px;
            background-color: black;
            width: 100px;
            height: 100px;
            border-radius: 100%;


        }
    </style>
    <script src="./ballcreat.js"></script>
</head>

<body>

    <div style="display: flex;">
        <button class="speeddown">简单</button>
        <button class="speedcenter">中等</button>
        <button class="speedhigh">困难</button>
        <input type="text" class="score" value="0">


    </div>
    <div><button class="restart">reload</button></div>
    <div>
        <p>空格或shift是技能。一开始就使用空格技能有惊喜（左上方）</p>
    </div>
    <div class="cheatbox" style="display: none;">
        <p>扣一送地狱火</p>
        <div><a href="https://www.bilibili.com/video/BV1hq4y1s7VH/?vd_source=1d4c0d0daf280de93a1bfbf4355fef1e"><button
                    class="cheat">1</button></a></div>
    </div>


    <div class="box">
        <div class="balluser">消炎</div>

        <div class="createdball"></div>
        <div class="creatball"></div>


    </div>

    <!-- restart -->
    <script>

        document.querySelector(".restart").addEventListener("click", function () {

            window.location.reload()
        })
    </script>

    <!-- playerballmove 技能 得分-->
    <script>

        let ballusers = document.querySelector(".balluser")
        let boxdiv = document.querySelector(".box")

        let diatance = Math.sqrt(Math.pow(parseFloat(getComputedStyle(boxdiv).width), 2) + Math.pow(parseFloat(getComputedStyle(boxdiv).height), 2))

        let timeonce = 0.035
        let speed = 10
        ballusers.style.top = getComputedStyle(ballusers).top
        ballusers.style.left = getComputedStyle(ballusers).left
        let direction = ""




        setInterval(() => {

            console.log(direction)
            //边框距离
            if (ballusers.style.left <= getComputedStyle(boxdiv).left) {
                ballusers.style.left = getComputedStyle(boxdiv).left
            }
            if (parseFloat(ballusers.style.left) >= parseFloat(getComputedStyle(boxdiv).left) + parseFloat(getComputedStyle(boxdiv).width) - parseFloat(getComputedStyle(ballusers).width)) {
                ballusers.style.left = parseFloat(getComputedStyle(boxdiv).left) + parseFloat(getComputedStyle(boxdiv).width) - parseFloat(getComputedStyle(ballusers).width) + "px"
            }
            if (ballusers.style.top <= getComputedStyle(boxdiv).top) {
                ballusers.style.top = getComputedStyle(boxdiv).top
            }
            if (parseFloat(ballusers.style.top) >= parseFloat(getComputedStyle(boxdiv).top) + parseFloat(getComputedStyle(boxdiv).height) - parseFloat(getComputedStyle(ballusers).width)) {
                ballusers.style.top = parseFloat(getComputedStyle(boxdiv).top) + parseFloat(getComputedStyle(boxdiv).height) - parseFloat(getComputedStyle(ballusers).width) + "px"
            }



            if (direction.includes('down')) {
                if (direction.includes('right')) {

                    ballusers.style.left = parseFloat(ballusers.style.left) + speed + 'px'
                }

                if (direction.includes('left')) {

                    ballusers.style.left = parseFloat(ballusers.style.left) - speed + 'px'
                }

                ballusers.style.top = parseFloat(ballusers.style.top) + speed + 'px'
            }

            if (direction.includes('up')) {
                if (direction.includes('right')) {

                    ballusers.style.left = parseFloat(ballusers.style.left) + speed + 'px'
                }

                if (direction.includes('left')) {

                    ballusers.style.left = parseFloat(ballusers.style.left) - speed + 'px'
                }

                ballusers.style.top = parseFloat(ballusers.style.top) - speed + 'px'
            }

            if (direction.includes('left') && !direction.includes("up") && !direction.includes("down")) {


                ballusers.style.left = parseFloat(ballusers.style.left) - speed + 'px'
            }

            if (direction.includes('right') && !direction.includes("up") && !direction.includes("down")) {

                ballusers.style.left = parseFloat(ballusers.style.left) + speed + 'px'
            }




            //空格技能

            document.addEventListener('keydown', (e) => {
                if (e.key == ' ') {
                    e.preventDefault()
                    ballusers.style.width += parseFloat(getComputedStyle(ballusers).width) + 1000 + 'px'
                    ballusers.style.height += parseFloat(getComputedStyle(ballusers).height) + 1000 + 'px'
                    alert("你使用了佛怒火莲，你的无敌了！")
                    window.alert = function () { return false; }
                    document.querySelector(".cheatbox").style.display = "block"



                    for (let i = 0; i < idnum.length; i++) {

                        let box55 = document.querySelector("." + idnum[i])

                        box55.style.display = "none"


                    }



                }

            })

            //shift技能
            document.addEventListener('keydown', (e) => {
                if (e.key == 'Shift') {
                    e.preventDefault()
                    speed = 100
                    alert("你使用了三千雷动，你变快了！")
                    window.alert = function () { return false; }

                }

            })


            //判断球是否吃到

            for (let i = 0; i < idnum.length; i++) {
                let box5 = document.querySelector("." + idnum[i])


                let leftdisaqr = parseFloat(getComputedStyle(ballusers).left) - parseFloat((getComputedStyle(box5)).left)
                let topdisaqr = parseFloat(getComputedStyle(ballusers).top) - parseFloat((getComputedStyle(box5)).top)


                if (Math.sqrt(Math.pow(leftdisaqr, 2) + Math.pow(topdisaqr, 2)) < parseFloat(getComputedStyle(ballusers).width) / 2 + 1) {

                    if (parseFloat(getComputedStyle(ballusers).width) < parseFloat(getComputedStyle(box5).width)) {
                        alert("you lose")
                        /*你被骗了*/      //  window.location.replace("https://www.bilibili.com/video/BV1hq4y1s7VH/?spm_id_from=333.337.search-card.all.click&vd_source=1d4c0d0daf280de93a1bfbf4355fef1e")
                        //  window.location.replace("file:///D:/qfweb/code/playball.html")
                       // location.href = "https://www.bilibili.com/video/BV1hq4y1s7VH/?spm_id_from=333.337.search-card.all.click&vd_source=1d4c0d0daf280de93a1bfbf4355fef1e"

                    } if (parseFloat(getComputedStyle(ballusers).width) > parseFloat(getComputedStyle(box5).width)) {

                        box5.style.display = "none"

                        ballusers.style.width = parseFloat(getComputedStyle(ballusers).width) + parseFloat(getComputedStyle(box5).width) / 2 * 0.1 + 'px'
                        ballusers.style.height = parseFloat(getComputedStyle(ballusers).height) + parseFloat(getComputedStyle(box5).height) / 2 * 0.1 + 'px'
                        let score = document.querySelector(".score").value
                        document.querySelector(".score").value = parseInt(score) + 1

                        idnum.replace(idnum[i], "")

                        console.log(score)
                    }
                }


            }








        }, 1000 / 60)








    </script>







    <!-- 按键判断-按下 写入字符串-->
    <script>
        document.addEventListener('keydown', (e) => {

            console.log("key:", e.key, "code:", e.code)

            if (e.key == 's' || e.key == 'ArrowDown' || e.key == 'S') {
                e.preventDefault()

                if (!direction.includes('down')) {
                    direction += 'down'
                }

                //ballusers.style.top = parseFloat(ballusers.style.top) + speed + 'px'
            }

            if (e.key == 'w' || e.key == 'ArrowUp' || e.key == 'W') {
                e.preventDefault()
                if (!direction.includes('up')) {
                    direction += 'up'
                }

                //  ballusers.style.top = parseFloat(ballusers.style.top) - speed + 'px'
            }

            if (e.key == 'd' || e.key == 'ArrowRight' || e.key == 'D') {
                e.preventDefault()
                if (!direction.includes('right')) {
                    direction += 'right'
                }
                //  ballusers.style.left = parseFloat(ballusers.style.left) + speed + 'px'
            }
            if (e.key == 'a' || e.key == 'ArrowLeft' || e.key == 'A') {
                e.preventDefault()
                if (!direction.includes('left')) {
                    direction += 'left'
                }

                // ballusers.style.left = parseFloat(ballusers.style.left) - speed + 'px'
            }


        })
    </script>


    <!-- 判断按键 -松开 从字符串中删除-->
    <script>
        document.addEventListener("keyup", (eup) => {
            console.log("upkey:", eup.key, "upcode:", eup.code)

            if (eup.key == 's' || eup.key == 'ArrowDown' || eup.key == 'S') {
                eup.preventDefault()

                direction = direction.replace('down', '')


                //ballusers.style.top = parseFloat(ballusers.style.top) + speed + 'px'
            }

            if (eup.key == 'w' || eup.key == 'ArrowUp' || eup.key == 'W') {
                eup.preventDefault()

                direction = direction.replace('up', '')


                //  ballusers.style.top = parseFloat(ballusers.style.top) - speed + 'px'
            }

            if (eup.key == 'd' || eup.key == 'ArrowRight' || eup.key == 'D') {
                eup.preventDefault()
                direction = direction.replace('right', '')

                //  ballusers.style.left = parseFloat(ballusers.style.left) + speed + 'px'
            }
            if (eup.key == 'a' || eup.key == 'ArrowLeft' || eup.key == 'A') {
                eup.preventDefault()
                direction = direction.replace('left', '')

                // ballusers.style.left = parseFloat(ballusers.style.left) - speed + 'px'
            }


        })
    </script>


    <!-- 随机生成 人机球 -->
    <script>


        /*   while (!creatTop >= getComputedStyle(boxdiv).top && creatTop <= getComputedStyle(boxdiv).top + getComputedStyle(boxdiv).height) {
              creatTop = Math.floor(Math.random() * 1000)
          }
          while (!creatleft >= getComputedStyle(boxdiv).left && creatleft <= getComputedStyle(boxdiv).left + getComputedStyle(boxdiv).width) {
              creatleft = Math.floor(Math.random() * 1000)
          } */


        let creatball = document.querySelector(".creatball")




        let idnum = ["d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9"]



        creatball.innerHTML = idnum.map((item) => {

            let creatTop = Math.floor(Math.random() * parseFloat(getComputedStyle(boxdiv).height))
            let creatleft = Math.floor(Math.random() * parseFloat(getComputedStyle(boxdiv).width))
            let creatwidthhei = Math.floor(Math.random() * 100)


            return ` <div class="${item}"
             style = "background-color:${randomColor()} ;width: ${creatwidthhei}px;height: ${creatwidthhei}px;top: ${creatTop}px;left:${creatleft}px;border-radius: 100%;position: absolute;" >
         </div > `

        }).join("")








        document.addEventListener('click', (e) => {

            if (e.target.classList.contains("speeddown")) {
                document.querySelector(".speeddown").style.display = "none"
                document.querySelector(".speedcenter").style.display = "block"
                document.querySelector(".speedhigh").style.display = "block"


            }
            if (e.target.classList.contains("speedcenter")) {
                speedcreat = speedcreat * 2
                document.querySelector(".speedcenter").style.display = "none"
                document.querySelector(".speeddown").style.display = "block"
                document.querySelector(".speedhigh").style.display = "block"
            }
            if (e.target.classList.contains("speedhigh")) {
                speedcreat = speedcreat * 3
                document.querySelector(".speedhigh").style.display = "none"
                document.querySelector(".speeddown").style.display = "block"
                document.querySelector(".speedcenter").style.display = "block"
            }
        })
        //调用球运动
        for (let i = 0; i < 10; i++) {
            var speedcreat = Math.random()


            moveStrict(i, speedcreat)
        }





        function moveStrict(id, speedcreat) {

            let box5 = document.querySelector("." + idnum[id])


            let creatspeedleft = speedcreat
            let creatspeedtop = speedcreat

            console.log(creatspeedleft, -creatspeedleft)



            box5.time1 = setInterval(function () {

                let box5left = parseFloat(getComputedStyle(box5).left)
                let box5top = parseFloat(getComputedStyle(box5).top)
                let wboxleft = parseFloat(getComputedStyle(boxdiv).left)
                let wboxtop = parseFloat(getComputedStyle(boxdiv).top)
                let wboxwidth = parseFloat(getComputedStyle(boxdiv).width)
                let wboxheight = parseFloat(getComputedStyle(boxdiv).height)


                if (box5left <= wboxleft) {
                    box5.style.left = wboxleft + 'px'
                    creatspeedleft = -creatspeedleft


                }
                if (box5left >= wboxleft + wboxwidth - box5.offsetWidth) {
                    box5.style.left = wboxleft + wboxwidth - box5.offsetWidth + 'px'
                    creatspeedleft = -creatspeedleft


                }

                if (box5top <= wboxtop) {
                    box5.style.top = wboxtop + 'px'
                    creatspeedtop = -creatspeedtop


                }
                if (box5top >= wboxtop + wboxheight - box5.offsetHeight) {
                    box5.style.top = wboxtop + wboxheight - box5.offsetHeight + 'px'
                    creatspeedtop = -creatspeedtop

                }



                box5.style.left = parseFloat(box5.style.left) + creatspeedleft + 'px'
                box5.style.top = parseFloat(box5.style.top) + creatspeedtop + 'px'



            }, 1000 / 60)


        }




    </Script>




</body>

</html>